<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="author" content="https://github.com/picturepan2/">
  <title>Elements - Spectre.css CSS Framework</title>
  <link rel="stylesheet" href="dist/spectre.css">
  <link rel="stylesheet" href="dist/spectre-icons.css">
  <link rel="stylesheet" href="dist/spectre-exp.css">
  <link rel="stylesheet" href="css/docs.css">
</head>
<body>
  <div class="docs-container off-canvas off-canvas-sidebar-show">
    <div class="docs-navbar">
      <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
        <i class="icon icon-menu"></i>
      </a>
      <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
    </div>

    <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
      <div class="docs-brand">
        <a href="index.html" class="docs-logo">
          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
          <h2>SPECTRE</h2>
        </a>
      </div>
      <div class="docs-nav">
        <div class="accordion-container">
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-1">
              Getting started
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="getting-started.html">Introduction</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#installation">Installation</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#custom">Custom version</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#browsers">Browser support</a>
                </li>
                <li class="menu-item">
                  <a href="getting-started.html#whatsnew">What's new</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked>
            <label class="accordion-header c-hand" for="docs-accordion-2">
              Elements
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="elements.html">Typography</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#tables">Tables</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#buttons">Buttons</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#forms">Forms</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#icons">Icons</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#labels">Labels</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#codes">Codes</a>
                </li>
                <li class="menu-item">
                  <a href="elements.html#media">Media</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-3">
              Layout
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="layout.html">Flexbox grid</a>
                </li>
                <li class="menu-item">
                  <a href="layout.html#responsive">Responsive</a>
                </li>
                <li class="menu-item">
                  <a href="layout.html#navbar">Navbar</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-4">
              Components
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="components.html">Accordions</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#autocomplete">Autocomplete</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#avatars">Avatars</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#badges">Badges</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#bars">Bars</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#breadcrumbs">Breadcrumbs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#cards">Cards</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#chips">Chips</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#empty">Empty states</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#menus">Menus</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#modals">Modals</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#navs">Navs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#pagination">Pagination</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#panels">Panels</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#popovers">Popovers</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#steps">Steps</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tabs">Tabs</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tiles">Tiles</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#toasts">Toasts</a>
                </li>
                <li class="menu-item">
                  <a href="components.html#tooltips">Tooltips</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-5">
              Utilities
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="utilities.html">Colors</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#cursors">Cursors</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#display">Display</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#divider">Divider</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#loading">Loading</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#position">Position</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#shapes">Shapes</a>
                </li>
                <li class="menu-item">
                  <a href="utilities.html#text">Text</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion">
            <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
            <label class="accordion-header c-hand" for="docs-accordion-6">
              Experimentals
            </label>
            <div class="accordion-body">
              <ul class="menu menu-nav">
                <li class="menu-item">
                  <a href="experimentals.html">Calendars</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#carousels">Carousels</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#comparison">Comparison sliders</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#filters">Filters</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#meters">Meters</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#off-canvas">Off-canvas</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#parallax">Parallax</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#progress">Progress</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#sliders">Sliders</a>
                </li>
                <li class="menu-item">
                  <a href="experimentals.html#timelines">Timelines</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <a class="off-canvas-overlay" href="#close"></a>

    <div id="content" class="docs-content off-canvas-content">
      <div id="elements" class="container">
        <h3 class="s-title"><a href="#elements" class="anchor" aria-hidden="true">#</a>Elements</h3>
      </div>

      <div class="container">
        <div class="docs-ad">
          <div class="hide-md">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- GitHub-lg -->
            <ins class="adsbygoogle"
                  style="display:inline-block;width:728px;height:90px"
                  data-ad-client="ca-pub-2225124559530218"
                  data-ad-slot="9894180784"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
          <div class="show-md">
            <!-- GitHub-sm -->
            <ins class="adsbygoogle"
                  style="display:inline-block;width:300px;height:250px"
                  data-ad-client="ca-pub-2225124559530218"
                  data-ad-slot="9278881734"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
        </div>
      </div>

      <div id="typography" class="container">
        <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3>
        <div class="docs-note">
          <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
        </div>
        <h4 id="typography-headings" class="s-subtitle">Headings</h4>
        <div class="columns">
          <div class="column col-12">
            <h1>H1 Heading <small class="label">40px</small></h1>
          </div>
          <div class="column col-12">
            <h2>H2 Heading <small class="label">32px</small></h2>
          </div>
          <div class="column col-12">
            <h3>H3 Heading <small class="label">28px</small></h3>
          </div>
          <div class="column col-12">
            <h4>H4 Heading <small class="label">24px</small></h4>
          </div>
          <div class="column col-12">
            <h5>H5 Heading <small class="label">20px</small></h5>
          </div>
          <div class="column col-12">
            <h6>H6 Heading <small class="label">16px</small></h6>
          </div>
        </div>

<!-- headings -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">h1</span>&gt;H1 Heading&lt;<span class="tag">/h1</span>&gt;
&lt;<span class="tag">h1</span>&gt;H1 Heading &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;40px&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h1</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;h1&quot;</span>&gt;H1 Heading&lt;<span class="tag">/span</span>&gt;
</code></pre>

        <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4>
        <div class="docs-note">
          <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
          <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
        </div>

<!-- paragraphs -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, ...&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span>&gt;...&lt;<span class="tag">/p</span>&gt;
</code></pre>

        <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <abbr title="Internationalization">I18N</abbr>
            <code class="ml-2">&lt;abbr&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <strong>Bold</strong>
            <code class="ml-2">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <cite>Citation</cite>
            <code class="ml-2">&lt;cite&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <code>Hello World!</code>
            <code class="ml-2">&lt;code&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <del>Deleted</del>
            <code class="ml-2">&lt;del&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <em>Emphasis</em>
            <code class="ml-2">&lt;em&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <i>Italic</i>
            <code class="ml-2">&lt;i&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <ins>Inserted</ins>
            <code class="ml-2">&lt;ins&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <kbd>Ctrl + S</kbd>
            <code class="ml-2">&lt;kbd&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <mark>Highlighted</mark>
            <code class="ml-2">&lt;mark&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <ruby>
              漢 <rt>kan</rt>
              字 <rt>ji</rt>
            </ruby>
            <code class="ml-2">&lt;ruby&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <s>Strikethrough</s>
            <code class="ml-2">&lt;s&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <samp>Sample</samp>
            <code class="ml-2">&lt;samp&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            Text <sub>Subscripted</sub>
            <code class="ml-2">&lt;sub&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            Text <sup>Superscripted</sup>
            <code class="ml-2">&lt;sup&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <time>20:00</time>
            <code class="ml-2">&lt;time&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <u>Underline</u>
            <code class="ml-2">&lt;u&gt;</code>
          </div>
          <div class="column col-6 col-xs-12">
            <var>x</var> = <var>y</var> + 2
            <code class="ml-2">&lt;var&gt;</code>
          </div>
        </div>

        <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4>
        <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5>
        <div class="docs-note">
          <p class="h6">Chinese (Simplified)</p>
          <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
          <p class="h6">Chinese (Tranditional)</p>
          <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p>
          <p class="h6">Japanese</p>
          <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
          <p class="h6">Korean</p>
          <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
        </div>
        <div class="docs-note">
          <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p>
        </div>

<!-- east asian -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;zh-Hans&quot;</span>&gt;革命不是请客吃饭，不是做文章……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ko&quot;</span>&gt;나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……&lt;<span class="tag">/p</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. </p>
        </div>
        <div class="docs-note">
          <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p>
          <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p>
        </div>

<!-- east asian -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">u</span>&gt;祇園&lt;<span class="tag">/u</span>&gt;&lt;<span class="tag">u</span>&gt;精舎&lt;<span class="tag">/u</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
</code></pre>

        <h4 id="typography-fonts" class="s-subtitle">Fonts</h4>
        <div class="docs-note">
          <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.</p>
        </div>

<!-- fonts -->
<pre class="code"><code><span class="com">&lt;!-- Western typography targeted --&gt;</span>
<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif</span>;
<span class="com">&lt;!-- Monospace typography targeted --&gt;</span>
<span class="atn">font-family</span>: <span class="atv">"SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace</span>;

<span class="com">&lt;!-- Chinese (lang="zh-Hans" and lang="zh-Hant") targeted --&gt;</span>
<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif</span>;
<span class="com">&lt;!-- Japanese (lang="ja") targeted --&gt;</span>
<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif</span>;
<span class="com">&lt;!-- Korean (lang="ko") targeted --&gt;</span>
<span class="atn">font-family</span>: <span class="atv">-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif</span>;
</code></pre>

        <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4>
        <blockquote>
          <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
          <cite>- Bill Gates</cite>
        </blockquote>

<!-- blockquote -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">blockquote</span>&gt;
  &lt;<span class="tag">p</span>&gt;The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. &lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">cite</span>&gt;- Bill Gates&lt;<span class="tag">/cite</span>&gt;
&lt;<span class="tag">/blockquote</span>&gt;
</code></pre>

        <h4 id="typography-lists" class="s-subtitle">Lists</h4>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <ul class="list">
              <li>list item 1</li>
              <li>list item 2
                <ul>
                  <li>list item 2.1</li>
                  <li>list item 2.2</li>
                  <li>list item 2.3</li>
                </ul>
              </li>
              <li>list item 3</li>
            </ul>
          </div>
          <div class="column col-4 col-xs-12">
            <ol class="list">
              <li>list item 1</li>
              <li>list item 2
                <ol>
                  <li>list item 2.1</li>
                  <li>list item 2.2</li>
                  <li>list item 2.3</li>
                </ol>
              </li>
              <li>list item 3</li>
            </ol>
          </div>
          <div class="column col-4 col-xs-12">
            <dl class="list">
              <dt>description list term 1</dt>
              <dd>description list description 1</dd>
              <dt>description list term 2</dt>
              <dd>description list description 2</dd>
              <dt>description list term 3</dt>
              <dd>description list description 3</dd>
            </dl>
          </div>
        </div>

<!-- lists -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- unordered list --&gt;</span>
&lt;<span class="tag">ul</span>&gt;
  &lt;<span class="tag">li</span>&gt;list item 1&lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span>&gt;list item 2
    &lt;<span class="tag">ul</span>&gt;
      &lt;<span class="tag">li</span>&gt;list item 2.1&lt;<span class="tag">/li</span>&gt;
      &lt;<span class="tag">li</span>&gt;list item 2.2&lt;<span class="tag">/li</span>&gt;
      &lt;<span class="tag">li</span>&gt;list item 2.3&lt;<span class="tag">/li</span>&gt;
    &lt;<span class="tag">/ul</span>&gt;
  &lt;<span class="tag">/li</span>&gt;
  &lt;<span class="tag">li</span>&gt;list item 3&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;

<span class="com">&lt;!-- description list --&gt;</span>
&lt;<span class="tag">dl</span>&gt;
  &lt;<span class="tag">dt</span>&gt;description list term&lt;<span class="tag">/dt</span>&gt;
  &lt;<span class="tag">dd</span>&gt;description list description&lt;<span class="tag">/dd</span>&gt;
&lt;<span class="tag">/dl</span>&gt;
</code></pre>

      </div>

      <div class="container">
        <div class="docs-ad docs-ad-sidebar">
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- github-vertical-sm -->
          <ins class="adsbygoogle"
              style="display:inline-block;width:120px;height:240px"
              data-ad-client="ca-pub-2225124559530218"
              data-ad-slot="5087273059"></ins>
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
        </div>
      </div>

      <div id="tables" class="container">
        <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3>
        <div class="docs-note">
          <p>Tables include default styles for tables and data sets.</p>
        </div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Genre</th>
              <th>Release date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The Shawshank Redemption</td>
              <td>Crime, Drama</td>
              <td>14 October 1994</td>
            </tr>
            <tr>
              <td>The Godfather</td>
              <td>Crime, Drama</td>
              <td>24 March 1972</td>
            </tr>
            <tr>
              <td>Schindler's List</td>
              <td>Biography, Drama, History</td>
              <td>4 February 1994</td>
            </tr>
            <tr>
              <td>Se7en</td>
              <td>Crime, Drama, Mystery</td>
              <td>22 September 1995</td>
            </tr>
          </tbody>
        </table>
        <div class="docs-note">
          <p>Add the <code>table</code> class to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p>
          <p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted. </p>
        </div>

<!-- tables -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-striped table-hover&quot;</span>&gt;
  &lt;<span class="tag">thead</span>&gt;
    &lt;<span class="tag">tr</span>&gt;
      &lt;<span class="tag">th</span>&gt;name&lt;<span class="tag">/th</span>&gt;
      &lt;<span class="tag">th</span>&gt;genre&lt;<span class="tag">/th</span>&gt;
      &lt;<span class="tag">th</span>&gt;release date&lt;<span class="tag">/th</span>&gt;
    &lt;<span class="tag">/tr</span>&gt;
  &lt;<span class="tag">/thead</span>&gt;
  &lt;<span class="tag">tbody</span>&gt;
    &lt;<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">&quot;active&quot;</span>&gt;
      &lt;<span class="tag">td</span>&gt;The Shawshank Redemption&lt;<span class="tag">/td</span>&gt;
      &lt;<span class="tag">td</span>&gt;Crime, Drama&lt;<span class="tag">/td</span>&gt;
      &lt;<span class="tag">td</span>&gt;14 October 1994&lt;<span class="tag">/td</span>&gt;
    &lt;<span class="tag">/tr</span>&gt;
  &lt;<span class="tag">/tbody</span>&gt;
&lt;<span class="tag">/table</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>If you need the tables with horizontal scroll, add the <code>table-scroll</code> class to the &lt;table&gt; element. </p>
        </div>

        <table class="table table-scroll">
          <thead>
            <tr>
              <th>Name</th>
              <th>Genre</th>
              <th>Director</th>
              <th>Rating</th>
              <th>Duration</th>
              <th>Release date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>The Shawshank Redemption</td>
              <td>Crime, Drama</td>
              <td>Frank Darabont</td>
              <td>R</td>
              <td>2h 22min</td>
              <td>14 October 1994</td>
            </tr>
            <tr>
              <td>The Godfather</td>
              <td>Crime, Drama</td>
              <td>Francis Ford Coppola</td>
              <td>R</td>
              <td>2h 55min</td>
              <td>24 March 1972</td>
            </tr>
            <tr>
              <td>Schindler's List</td>
              <td>Biography, Drama, History</td>
              <td>Steven Spielberg</td>
              <td>R</td>
              <td>3h 15min</td>
              <td>4 February 1994</td>
            </tr>
            <tr>
              <td>Se7en</td>
              <td>Crime, Drama, Mystery</td>
              <td>David Fincher</td>
              <td>R</td>
              <td>2h 7min</td>
              <td>22 September 1995</td>
            </tr>
          </tbody>
        </table>

<!-- tables -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-scroll&quot;</span>&gt;
  <span class="com">&lt;!-- table content --&gt;</span>
&lt;<span class="tag">/table</span>&gt;
</code></pre>

      </div>

      <div id="buttons" class="container">
        <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3>
        <div class="docs-note">
          <p>Buttons include simple button styles for actions in different types and sizes. </p>
        </div>
        <div class="columns">
          <div class="column col-xs-12">
            <button class="btn">default button</button>
            <button class="btn btn-primary">primary button</button>
            <button class="btn btn-link">link button</button>
          </div>
        </div>

        <div class="docs-note">
          <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <h4 id="buttons-colors" class="s-subtitle">Button colors</h4>
        <div class="columns">
          <div class="column col-12">
            <button class="btn btn-success">success button</button>
            <button class="btn btn-error">error button</button>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. </p>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-success&quot;</span>&gt;success button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-error&quot;</span>&gt;error button&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4>
        <div class="columns">
          <div class="column col-12">
            <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button>
            <button class="btn btn-primary btn-lg">large button</button>
          </div>
          <div class="column col-12">
            <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button>
            <button class="btn btn-primary">normal button</button>
          </div>
          <div class="column col-12">
            <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button>
            <button class="btn btn-primary btn-sm">small button</button>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-lg&quot;</span>&gt;large button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-sm&quot;</span>&gt;small button&lt;<span class="tag">/button</span>&gt;

&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;

&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p>
        </div>

        <div class="columns">
          <div class="column col-xs-12">
            <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
            <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
            <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
          </div>
          <div class="column col-xs-12">
            <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
            <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button>
            <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button>
          </div>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <h4 id="buttons-states" class="s-subtitle">Button states</h4>

        <div class="docs-note">
          <p>Add the <code>active</code> class for active button state style.</p>
        </div>

        <div class="columns">
          <div class="column col-xs-12">
            <button class="btn active">default active</button>
            <button class="btn btn-primary active">primary active</button>
            <button class="btn btn-link active">link active</button>
          </div>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- buttons with active state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn active&quot;</span>&gt;active button&lt;<span class="tag">/button</span>&gt;
</code></pre>
          
        <div class="docs-note">
          <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
        </div>

        <div class="columns">
          <div class="column col-xs-12">
            <button class="btn disabled" tabindex="-1">default disabled</button>
            <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button>
            <button class="btn btn-link" disabled tabindex="-1">link disabled</button>
          </div>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- buttons with disabled state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>A button with the <code>loading</code> class can show loading indicator.</p>
        </div>

        <div class="columns">
          <div class="column col-xs-12">
            <button class="btn loading">default button</button>
            <button class="btn btn-primary loading">primary button</button>
            <button class="btn btn-link loading">link button</button>
          </div>
        </div>

<!-- buttons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- a button with loading state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
</code></pre>

        <h4 id="buttons-groups" class="s-subtitle">Button groups</h4>
        <div class="columns">
          <div class="column col-md-12">
            <div class="btn-group">
              <button class="btn">first button</button>
              <button class="btn">second button</button>
              <button class="btn">third button</button>
            </div>
          </div>
          <div class="column col-md-12">
            <div class="btn-group btn-group-block">
              <button class="btn btn-primary">first button</button>
              <button class="btn btn-primary">second button</button>
              <button class="btn btn-primary">third button</button>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-md-12">
            <div class="btn-group">
              <button class="btn btn-sm active">first button</button>
              <button class="btn btn-sm">second button</button>
              <button class="btn btn-sm">third button</button>
            </div>
          </div>
          <div class="column col-md-12">
            <div class="btn-group btn-group-block">
              <button class="btn btn-primary btn-sm active">first button</button>
              <button class="btn btn-primary btn-sm">second button</button>
              <button class="btn btn-primary btn-sm">third button</button>
            </div>
          </div>
        </div>
        <div class="docs-note">
          <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p>
        </div>

<!-- button groups -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group btn-group-block&quot;</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;first button&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;second button&lt;<span class="tag">/button</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;third button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

      </div>

      <div id="forms" class="container">
        <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3>
        <div class="docs-note">
          <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.  </p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="form-group">
              <label class="form-label" for="input-example-1">Name</label>
              <input class="form-input" type="text" id="input-example-1" placeholder="Name">
            </div>
            <div class="form-group">
              <label class="form-label" for="input-example-2">Email</label>
              <input class="form-input" type="email" id="input-example-2" placeholder="Email">
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="form-group">
              <label class="form-label" for="input-example-3">Message</label>
              <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form textarea control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-3&quot;</span>&gt;Message&lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-3&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Textarea&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="form-group">
              <select class="form-select">
                <option>Choose an option</option>
                <option>Slack</option>
                <option>Skype</option>
                <option>Hipchat</option>
              </select>
            </div>
            <div class="form-group">
              <select class="form-select" multiple>
                <option>Choose an option</option>
                <option>Slack</option>
                <option>Skype</option>
                <option>Hipchat</option>
              </select>
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form select control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">&quot;form-select&quot;</span>&gt;
    &lt;<span class="tag">option</span>&gt;Choose an option&lt;<span class="tag">/option</span>&gt;
    &lt;<span class="tag">option</span>&gt;Slack&lt;<span class="tag">/option</span>&gt;
    &lt;<span class="tag">option</span>&gt;Skype&lt;<span class="tag">/option</span>&gt;
    &lt;<span class="tag">option</span>&gt;Hipchat&lt;<span class="tag">/option</span>&gt;
  &lt;<span class="tag">/select</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>
        
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <form>
              <div class="form-group">
                <label class="form-label">Gender</label>
                <label class="form-radio">
                  <input type="radio" name="gender" checked>
                  <i class="form-icon"></i> Male
                </label>
                <label class="form-radio">
                  <input type="radio" name="gender">
                  <i class="form-icon"></i> Female
                </label>
              </div>
            </form>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form radio control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Male
  &lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Female
  &lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="form-group">
              <label class="form-switch">
                <input type="checkbox">
                <i class="form-icon"></i> Send me emails with news and tips
              </label>
            </div>
            <div class="form-group">
              <label class="form-switch">
                <input type="checkbox" checked>
                <i class="form-icon"></i> Send me emails with news and tips
              </label>
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form switch control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-switch&quot;</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Send me emails with news and tips
  &lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="columns">
          <div class="column col-6 col-xs-12">
            <div class="form-group">
              <label class="form-checkbox">
                <input type="checkbox">
                <i class="form-icon"></i> Remember me
              </label>
            </div>
            <div class="form-group">
              <label class="form-checkbox">
                <input type="checkbox" checked>
                <i class="form-icon"></i> Remember me
              </label>
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form checkbox control --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
  &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
  &lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
        </div>

        <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4>
        <div class="docs-note">
          <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p>
        </div>
        <div class="columns">
          <div class="column col-9 col-sm-12">
            <form class="form-horizontal" action="#forms">
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-4">Name</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="text" id="input-example-4" placeholder="Name">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-5">Email</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="email" id="input-example-5" placeholder="Email">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label">Gender</label>
                </div>
                <div class="col-9">
                  <label class="form-radio">
                    <input type="radio" name="gender">
                    <i class="form-icon"></i> Male
                  </label>
                  <label class="form-radio">
                    <input type="radio" name="gender" checked>
                    <i class="form-icon"></i> Female
                  </label>
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label">Source</label>
                </div>
                <div class="col-9">
                  <select class="form-select" multiple>
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <div class="col-9 col-ml-auto">
                  <label class="form-switch">
                    <input type="checkbox">
                    <i class="form-icon"></i> Send me emails with news and tips
                  </label>
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-6">Message</label>
                </div>
                <div class="col-9">
                  <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-9 col-ml-auto">
                  <label class="form-checkbox">
                    <input type="checkbox">
                    <i class="form-icon"></i> Remember me
                  </label>
                </div>
              </div>
            </form>
          </div>
        </div>

<!-- forms -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">&quot;form-horizontal&quot;</span>&gt;
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-3&quot;</span>&gt;
      &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;col-9&quot;</span>&gt;
      &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Name&quot;</span>&gt;
    &lt;<span class="tag">/div</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
  <span class="com">&lt;!-- form structure --&gt;</span>
&lt;<span class="tag">/form</span>&gt;
</code></pre>

        <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4>
        <div class="docs-note">
          <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
        </div>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <label class="form-label label-sm">Label</label>
          </div>
          <div class="column col-4 col-xs-12">
            <input class="form-input input-sm" type="text" placeholder="Name">
          </div>
          <div class="column col-4 col-xs-12">
            <select class="form-select select-sm">
              <option>Choose an option</option>
              <option>Slack</option>
              <option>Skype</option>
              <option>Hipchat</option>
            </select>
          </div>
        </div>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <label class="form-label label-lg">Label</label>
          </div>
          <div class="column col-4 col-xs-12">
            <input class="form-input input-lg" type="text" placeholder="Name">
          </div>
          <div class="column col-4 col-xs-12">
            <select class="form-select select-lg">
              <option>Choose an option</option>
              <option>Slack</option>
              <option>Skype</option>
              <option>Hipchat</option>
            </select>
          </div>
        </div>
        <div class="docs-note">
          <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
        </div>

        <h4 id="forms-icons" class="s-subtitle">Form icons</h4>
        <div class="docs-note">
          <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p>
          <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
        </div>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <div class="has-icon-left">
              <input class="form-input input-sm" type="text" placeholder="Name">
              <i class="form-icon icon icon-arrow-right"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
              <input class="form-input" type="text" placeholder="Name">
              <i class="form-icon icon icon-arrow-right"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-left">
              <input class="form-input input-lg" type="text" placeholder="Name">
              <i class="form-icon icon icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input input-sm" type="text" placeholder="Name">
              <i class="form-icon icon icon-check"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input" type="text" placeholder="Name">
              <i class="form-icon icon icon-check"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input input-lg" type="text" placeholder="Name">
              <i class="form-icon icon icon-check"></i>
            </div>
          </div>
        </div>

<!-- form icons -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input with Spectre icon --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-left&quot;</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon icon icon-check&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>You can use the <code>loading</code> class for loading or posting state.</p>
        </div>

        <div class="columns">
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input input-sm" type="text" placeholder="Name">
              <i class="form-icon loading"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input" type="text" placeholder="Name">
              <i class="form-icon loading"></i>
            </div>
          </div>
          <div class="column col-4 col-xs-12">
            <div class="has-icon-right">
              <input class="form-input input-lg" type="text" placeholder="Name">
              <i class="form-icon loading"></i>
            </div>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- form input with loading icon --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;has-icon-right&quot;</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon loading&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <h4 id="forms-input" class="s-subtitle">Input types</h4>
        <div class="columns">
          <div class="column col-9 col-sm-12">
            <form class="form-horizontal" action="#forms">
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-8">Email</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-9">URL</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-10">Search</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="search" id="input-example-10" placeholder="Search">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-11">Tel</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-12">Password</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-13">Number</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-14">Date</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="date" id="input-example-14" value="2016-12-31">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-15">Color</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="color" id="input-example-15" value="#5755d9">
                </div>
              </div>
              <div class="form-group">
                <div class="col-3">
                  <label class="form-label" for="input-example-16">File</label>
                </div>
                <div class="col-9">
                  <input class="form-input" type="file" id="input-example-16">
                </div>
              </div>
            </form>
          </div>
        </div>

        <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4>
        <div class="columns">
          <div class="column col-xs-12">
            <div class="input-group">
              <input type="text" class="form-input input-sm" placeholder="username">
              <select class="form-select select-sm">
                <option>Slack</option>
                <option>Skype</option>
                <option>Hipchat</option>
              </select>
            </div>
          </div>
          <div class="column col-xs-12">
            <div class="input-group">
              <span class="input-group-addon addon-sm">slack.com/</span>
              <input type="text" class="form-input input-sm" placeholder="site name">
              <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-xs-12">
            <div class="input-group">
              <input type="text" class="form-input" placeholder="username">
              <select class="form-select">
                <option>Slack</option>
                <option>Skype</option>
                <option>Hipchat</option>
              </select>
            </div>
          </div>
          <div class="column col-xs-12">
            <div class="input-group">
              <span class="input-group-addon">slack.com/</span>
              <input type="text" class="form-input" placeholder="site name">
              <button class="btn btn-primary input-group-btn">Submit</button>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-xs-12">
            <div class="input-group">
              <label class="form-switch">
                <input type="checkbox">
                <i class="form-icon"></i>
              </label>
              <input type="text" class="form-input" placeholder="name">
            </div>
          </div>
          <div class="column col-xs-12">
            <div class="input-group">
              <label class="form-checkbox">
                <input type="checkbox">
                <i class="form-icon"></i>
              </label>
              <input type="text" class="form-input" placeholder="name">
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column col-xs-12">
            <div class="input-group">
              <input type="text" class="form-input input-lg" placeholder="username">
              <select class="form-select select-lg">
                <option>Slack</option>
                <option>Skype</option>
                <option>Hipchat</option>
              </select>
            </div>
          </div>
          <div class="column col-xs-12">
            <div class="input-group">
              <span class="input-group-addon addon-lg">slack.com/</span>
              <input type="text" class="form-input input-lg" placeholder="site name">
              <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
            </div>
          </div>
        </div>

        <div class="docs-note">
          <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p>
        </div>

<!-- input groups -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- normal input group --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
  &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- large input group --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
  &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon addon-lg&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-lg&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;

<span class="com">&lt;!-- normal input group with button --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
  &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;...&lt;<span class="tag">/span</span>&gt;
  &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Submit&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">/div</span>&gt;
</code></pre>

        <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4>
        <div class="docs-note">
          <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p>
        </div>
        <div class="columns">
          <div class="column col-9 col-sm-12">
            <fieldset>
              <legend>Input</legend>
              <div class="form-group">
                <label class="form-label" for="input-example-17">Name</label>
                <input class="form-input is-success" type="text" id="input-example-17" placeholder="Name">
                <p class="form-input-hint">The name is valid.</p>
              </div>
              <div class="form-group has-error">
                <label class="form-label" for="input-example-18">Password</label>
                <input class="form-input" type="password" id="input-example-18" placeholder="Password">
                <p class="form-input-hint">Passwords must have at least 8 characters.</p>
              </div>
              <div class="form-group">
                <label class="form-label" for="input-example-21">Email</label>
                <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$">
                <p class="form-input-hint">The Email address is unavailable.</p>
              </div>
            </fieldset>
            <fieldset>
              <legend>Select</legend>
              <div class="form-group">
                <select class="form-select is-error">
                  <option>Choose an option</option>
                  <option>Slack</option>
                  <option>Skype</option>
                  <option>Hipchat</option>
                </select>
                <p class="form-input-hint">The option is invalid.</p>
              </div>
              <div class="form-group has-success">
                <select class="form-select">
                  <option>Choose an option</option>
                  <option>Slack</option>
                  <option>Skype</option>
                  <option>Hipchat</option>
                </select>
                <p class="form-input-hint">The option is available.</p>
              </div>
            </fieldset>
            <fieldset>
              <legend>Checkbox, Radio and Switch (Error state only)</legend>
              <div class="form-group">
                <label class="form-checkbox is-error">
                  <input type="checkbox" checked>
                  <i class="form-icon"></i> I'm not a robot.
                </label>
              </div>
              <div class="form-group has-error">
                <label class="form-radio">
                  <input type="radio" name="gender" checked>
                  <i class="form-icon"></i> Male
                </label>
                <label class="form-radio">
                  <input type="radio" name="gender">
                  <i class="form-icon"></i> Female
                </label>
              </div>
              <div class="form-group">
                <label class="form-switch is-error">
                  <input type="checkbox" checked>
                  <i class="form-icon"></i> Send me emails with news and tips
                </label>
              </div>
            </fieldset>
          </div>
        </div>

<!-- forms -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">form</span>&gt;
  <span class="com">&lt;!-- form validation class: has-success --&gt;</span>
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group has-success&quot;</span>&gt;
    &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">/div</span>&gt;

  <span class="com">&lt;!-- form validation class: is-success --&gt;</span>
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
    &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
    &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span>&gt;
    &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
  &lt;<span class="tag">/div</span>&gt;

  <span class="com">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
    &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox is-error&quot;</span>&gt;
      &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
      &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
    &lt;<span class="tag">/label</span>&gt;
  &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/form</span>&gt;
</code></pre>

        <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4>
        <div class="docs-note">
          <p>Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <form action="#forms">
              <fieldset disabled>
                <div class="form-group">
                  <label class="form-label" for="input-example-19">Name</label>
                  <input class="form-input" type="text" id="input-example-19" placeholder="Name">
                </div>
                <div class="form-group">
                  <label class="form-label">Gender</label>
                  <label class="form-radio">
                    <input type="radio" name="gender" disabled>
                    <i class="form-icon"></i> Male
                  </label>
                  <label class="form-radio">
                    <input type="radio" name="gender" disabled>
                    <i class="form-icon"></i> Female
                  </label>
                </div>
                <div class="form-group">
                  <select class="form-select" disabled>
                    <option>Choose an option</option>
                    <option>Slack</option>
                    <option>Skype</option>
                    <option>Hipchat</option>
                  </select>
                </div>
                <div class="form-group">
                  <label class="form-switch">
                    <input type="checkbox" disabled>
                    <i class="form-icon"></i> Send me emails with news and tips
                  </label>
                </div>
                <div class="form-group">
                  <label class="form-label" for="input-example-20">Message</label>
                  <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
                </div>
                <div class="form-group">
                  <label class="form-checkbox">
                    <input type="checkbox" disabled>
                    <i class="form-icon"></i> Remember me
                  </label>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>

      <div id="icons" class="container">
        <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3>
        <div class="docs-note">
          <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
        </div>
        <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4>
        <div class="columns">
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-arrow-up"></i>
            </button>
            <p>icon-arrow-up</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-arrow-right"></i>
            </button>
            <p>icon-arrow-right</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-arrow-down"></i>
            </button>
            <p>icon-arrow-down</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-arrow-left"></i>
            </button>
            <p>icon-arrow-left</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-upward"></i>
            </button>
            <p>icon-upward</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-forward"></i>
            </button>
            <p>icon-forward</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-downward"></i>
            </button>
            <p>icon-downward</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-back"></i>
            </button>
            <p>icon-back</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-caret"></i>
            </button>
            <p>icon-caret</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-menu"></i>
            </button>
            <p>icon-menu</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-apps"></i>
            </button>
            <p>icon-apps</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-more-horiz"></i>
            </button>
            <p>icon-more-horiz</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-more-vert"></i>
            </button>
            <p>icon-more-vert</p>
          </div>
        </div>
        <h4 id="icons-action" class="s-subtitle">Action icons</h4>
        <div class="columns">
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-resize-horiz"></i>
            </button>
            <p>icon-resize-horiz</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-resize-vert"></i>
            </button>
            <p>icon-resize-vert</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-plus"></i>
            </button>
            <p>icon-plus</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-minus"></i>
            </button>
            <p>icon-minus</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-cross"></i>
            </button>
            <p>icon-cross</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-check"></i>
            </button>
            <p>icon-check</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-stop"></i>
            </button>
            <p>icon-stop</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-shutdown"></i>
            </button>
            <p>icon-shutdown</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-refresh"></i>
            </button>
            <p>icon-refresh</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-search"></i>
            </button>
            <p>icon-search</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-flag"></i>
            </button>
            <p>icon-flag</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-bookmark"></i>
            </button>
            <p>icon-bookmark</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-edit"></i>
            </button>
            <p>icon-edit</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-delete"></i>
            </button>
            <p>icon-delete</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-share"></i>
            </button>
            <p>icon-share</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-download"></i>
            </button>
            <p>icon-download</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-upload"></i>
            </button>
            <p>icon-upload</p>
          </div>
        </div>
        <h4 id="icons-object" class="s-subtitle">Object icons</h4>
        <div class="columns">
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-mail"></i>
            </button>
            <p>icon-mail</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-people"></i>
            </button>
            <p>icon-people</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-message"></i>
            </button>
            <p>icon-message</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-photo"></i>
            </button>
            <p>icon-photo</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-time"></i>
            </button>
            <p>icon-time</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-location"></i>
            </button>
            <p>icon-location</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-link"></i>
            </button>
            <p>icon-link</p>
          </div>
          <div class="column col-3 col-md-6">
            <button class="btn btn-primary btn-action btn-lg">
              <i class="icon icon-emoji"></i>
            </button>
            <p>icon-emoji</p>
          </div>
        </div>

<!-- icons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
</code></pre>

        <h4 id="icons-sizes" class="s-subtitle">Icon sizes</h4>
        <div class="docs-note">
          <p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes. You can set <code>font-size</code> to have different icon sizes.</p>
        </div>
        <div class="columns">
          <div class="column col-3 col-md-6">
            <p><i class="icon icon-2x icon-mail"></i></p>
            <p>icon-2x (32px)</p>
          </div>
          <div class="column col-3 col-md-6">
            <p><i class="icon icon-3x icon-mail"></i></p>
            <p>icon-3x (48px)</p>
          </div>
          <div class="column col-3 col-md-6">
            <p><i class="icon icon-4x icon-mail"></i></p>
            <p>icon-4x (64px)</p>
          </div>
        </div>

<!-- icons -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-2x icon-mail&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
</code></pre>

      </div>

      <div id="labels" class="container">
        <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3>
        <div class="docs-note">
          <p>Labels are formatted text tags for highlighted, informative information.</p>
        </div>
        <div class="columns">
          <div class="column">
            <span class="label">default label</span>
            <span class="label label-primary">primary label</span>
            <span class="label label-secondary">secondary label</span>
            <span class="label label-success">success label</span>
            <span class="label label-warning">warning label</span>
            <span class="label label-error">error label</span>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.</p>
        </div>
        <div class="columns">
          <div class="column">
            <span class="label label-rounded">default label</span>
            <span class="label label-rounded label-primary">primary label</span>
            <span class="label label-rounded label-secondary">secondary label</span>
            <span class="label label-rounded label-success">success label</span>
            <span class="label label-rounded label-warning">warning label</span>
            <span class="label label-rounded label-error">error label</span>
          </div>
        </div>
        <div class="docs-note">
          <p>Add the <code>label-rounded</code> class to have rounded labels.</p>
        </div>

<!-- labels -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;default label&lt;<span class="tag">/span</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;primary label&lt;<span class="tag">/span</span>&gt;
</code></pre>

      </div>

      <div id="codes" class="container">
        <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3>
        <div class="docs-note">
          <p>Codes are inline and multiline code snippets.</p>
          <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
        </div>

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
  Submit
&lt;<span class="tag">/button</span>&gt;
</code></pre>

<!-- codes -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;com&quot;</span>&gt;&amp;lt;!-- code snippets --&amp;gt;&lt;<span class="tag">/span</span>&gt;
&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;&lt;<span class="tag">/span</span>&gt;&amp;gt;
  Submit
&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;/button&lt;<span class="tag">/span</span>&gt;&amp;gt;
&lt;<span class="tag">/code</span>&gt;&lt;<span class="tag">/pre</span>&gt;
</code></pre>

      </div>

      <div id="media" class="container">
        <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3>
        <div class="docs-note">
          <p>Media includes responsive images, figures and video classes. </p>
        </div>
        <h4 id="media-images" class="s-subtitle">Images</h4>
        <div class="docs-note">
          <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper">
          </div>
        </div>

        <div class="docs-note">
          <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in preview</a>.</p>
        </div>
        <div class="columns">
          <div class="column col-6 col-xs-12">
            <figure class="figure">
              <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
              <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
            </figure>
          </div>
          <div class="column col-6 col-xs-12">
            <figure class="figure">
              <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
              <figcaption class="figure-caption text-center">img-fit-cover</figcaption>
            </figure>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-contain ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-cover ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
</code></pre>

        <div class="docs-note">
          <p>You can use the element &lt;figure&gt; for an image with a caption. Add the <code>figure</code> class to &lt;figure&gt; element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.  </p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <figure class="figure">
              <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper">
              <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
            </figure>
          </div>
        </div>

<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;figure&quot;</span>&gt;
  &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-yosemite-2.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
  &lt;<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">&quot;figure-caption text-center&quot;</span>&gt;macOS Yosemite wallpaper&lt;<span class="tag">/figcaption</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

        <h4 id="media-video" class="s-subtitle">Video</h4>
        <div class="docs-note">
          <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p>
        </div>
        <div class="columns">
          <div class="column col-12">
            <div class="video-responsive">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe>
            </div>
          </div>
        </div>

        <div class="docs-note">
          <p>For responsive <code>video</code> elements, you can add the <code>video-responsive</code> class directly to the <code>video</code>.</p>
        </div>

<!-- media -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive video-responsive-4-3&quot;</span>&gt;
  &lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">width</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;...&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
&lt;<span class="tag">/div</span>&gt;

&lt;<span class="tag">video</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive&quot;</span> <span class="atn">src</span>=<span class="atv">&quot;...&quot;</span>&gt;...&lt;<span class="tag">/video</span>&gt;
</code></pre>

      </div>

      <footer class="docs-footer">
        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
      </footer>

    </div>
  </div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-2702768-8', 'auto');
    ga('send', 'pageview');
  </script>
</body>
</html>
